import axios from 'axios'
import { Message } from 'element-ui'
import { getToken } from './auth'
import store from '@/store'
import router from '@/router'
// 使create：用一个自定义配置新建一个实例，相当于new
// baseURL：接口基地址
// timeout：请求超时时间，也就是客户端发送请求在5秒后，服务端还没有做出响应，那么当前请求就取消掉
// service 实例也就是 axios + 额外的配置，相当于就是说把axios再进行强大的配置
// create方法是可以执行多次的
// 1、实例化create方法
// 定制axios的基地址和超时时间
// 基地址：项目里面大部分接口前面的协议域名端口都是一致的，只有后面的相对路径不一样
const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API,
  timeout: 5000 // request timeout
})

// 请求拦截器：就是在请求发送之前，可以对请求参数多一些额外配置
// 具体场景：在请求头中，注入token---》目的：大多数需要鉴权的接口能够统一获取到用户标识
service.interceptors.request.use(config => {
  // 在这个位置需要统一的去注入token
  const token = getToken()
  if (token) {
    config.headers['Authorization'] = `Bearer ${token}`
  }
  return config
}, error => {
  return Promise.reject(error)
})
// 响应拦截器就是返回数据到客户端之前，会把数据拦截下来做一些处理
// 具体事情：1、token失效，接口401 退出登录，简化组件中响应数据的访问
// 注意事项：成功回调和失败回调什么时候执行，http码判断的200-300的状态码就走第一个回调，不在这个之间就走失败回调
// 谁决定当前的http状态码：后端

// 为什么选择这里解决？因为很多接口都有类似的问题，所以统一解决
// 问题:后端不移200-300作为接口成功失败的标识，以一个自定义的success作为标识
// 前后端的依据不统一，永远走的都是成功的回调
// 解决思路：前端自己判断当前接口成功还是失败，如果成功还是按照之前的逻辑return，如果失败就仿照出现错误时，模拟抛出错误
service.interceptors.response.use(
  response => {
    // 这个地方千万不要丢失return
    const {data, message, success} = response.data
    if (success) {
      return data
    } else {
      // 提示错误信息，抛出错误
      Message.warning(message)
      return Promise.reject(message)
    }
    // return response.data
   
  },
  error => {
    if (error.response.status === 401){
      store.commit('user/removeUserInfo')
      router.push('/login')
    }
    return Promise.reject(error)
  }
)
// 将axios封装好的实例以默认导出的方式：导出给api模块使用
export default service
